<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="序号" width="150" />
    <el-table-column prop="imgSrc" label="" width="120">
      <template #default="scope">
        <el-avatar shape="square" :size="100" fit="fit" :src="url" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="password" label="密码" width="120" />
    <el-table-column prop="gender" label="性别" width="120" />
    <el-table-column prop="birthday" label="生日" width="250" />
    <el-table-column prop="age" label="年龄" width="120" />
    <el-table-column prop="classInfo.name" label="年级" width="120"/>
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
          Detail
        </el-button>
        <el-button link type="primary" size="small" @click="deleteById(scope.row.id)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <router-view/>
</template>

<script>
import {defineComponent} from 'vue'
import {deleteById, queryAll, queryById} from "../api/user.js";

export default defineComponent({
  name: "UserList",
  data(){
    return{
      tableData:[
        {
          "id": 1,
          "imgSrc": "",
          // url:"http://localhost:9000/data" + this.tableData.imgSrc,
          "name": "张三",
          "password": "123",
          "gender": "男",
          "birthday": "2000-02-01",
          "age": 24,
          "classInfo": {
            "id": 1,
            "name": "一年级"
          }
        },
        {
          "id": 2,
          "imgSrc":"",
          // url:"http://localhost:9000/data" + this.tableData.imgSrc,
          "name": "张四",
          "password": "123",
          "gender": "男",
          "birthday": "2001-01-31",
          "age": 23,
          "classInfo": {
            "id": 3,
            "name": "三年级"
          }
        }
      ],
      // url:"http://localhost:9000/data" + this.tableData.imgSrc
    }
  },
  methods:{
    handleClick(id){
      // let {data:data} = await queryById(id)
      // console.log(data)
      this.$router.push(`/userList/userUpdate/${id}`)
    },
    async loadUserList(){
      let {data:data} = await queryAll()
      console.log(data)
      this.tableData = data
    },
    async deleteById(id){
      let {data:data} = await deleteById(id)
      console.log(data)
    }
  },
  mounted() {
    this.loadUserList()
  }
})
</script>

<style scoped>
.el-table{
  margin: 10px;
}
</style>